<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>商品列表</title>
    <c:set var="root" value="${pageContext.request.contextPath}"></c:set>
    <script src="${root}/layui/layui.all.js">
    </script>
    <script src="${root}/js/jquery3.3.1.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    function showEdit(id){
        //异步查询出窗口
        $.ajax({
           dataType:"json",
            type:"post",
            url:"showProduct2",
            data:{"id":id},
            success:function(data){
              Product(data);
            }
        });
        function Product(list) {
            $.each(list,function (index,element) {
                $("input[name=typeName]").val(element.typeName);
                $("input[name=name]").val(element.name);
                $("input[name=costGolds]").val(element.costGolds);
                $("input[name=costIngots]").val(element.costIngots);
                $("input[name=amount]").val(element.amount);
                $("input[name=saleNum]").val(element.saleNum);
                $("input[name=photo]").val(element.photo);
                $("input[name=description]").val(element.description);
                $("input[name=isNeedAdress]").val(element.isNeedAdress);
                $("input[name=status]").val(element.status);
                $("input[name=id]").val(element.id);
            })
        }
        //负责显示弹窗
        var	layer = layui.layer;
        var othis = $(this);
        var type = othis.data('type')
        var text = othis.text();
        layer.open({
            type: 1
            ,offset: type
            ,id: 'layerDemo'+type //防止重复弹出
            ,content: $("#form")
            ,btn: ['取消', '确定']
            ,btnAlign: 'c' //按钮居中
            ,shade: 0.5 //不显示遮罩
            ,title:"修改主题"
            ,yes: function(index, layero){
                layer.close(index);
            },
            btn2: function(index, layero){
                $("#form1").submit();
            },
            end:function(){
                $("#form").hide();
            }
        });
    }
    //全选
    var oall= document.getElementById("all");
    var oid=document.getElementById("id");
    oall.onclick=function () {//勾选全选时
        for(var i = 0;i < oid.length;i++){
            //所有的选择框个全选一致
            oid[i].checked=oall.checked;
        }
    };
    //点击复选框
    for(var i = 0;i<oid.length;i++){
        oid[i].onclick = function () {
            //判断是否全部选中，遍历集合
            for (var j = 0;j<oid.length;j++){
                if(oid[j].checked==false){
                    oall.checked=false;
                    break;
                }else {
                    oall.checked=true;
                }
            }
        };
    }
    //批量删除
    function todelect(){
        var Checkbox=false;//默认复选框为空
        $("input[name='id']").each(function(){//获取复选框节点id
            if (this.checked==true) {
                Checkbox=true;    //已勾选
            }
        });
        if (Checkbox){//boolean值为true
            var t=confirm("您确认要删除选中的内容吗？");//弹出对话进行警告
            if (t==false) return false;    //不勾选不处理
            obj = document.getElementsByName("id");//将复选框定义成一个jquery对象
            check_val = [];//定义一个数组
            for(k in obj){//k相当于i,往这个jquery对象添加勾选的id;
                if(obj[k].checked)//选中的都放进 数组里
                    check_val.push(obj[k].value);
            }

            $.ajax({//利用ajax发出请求
                type:"POST",//post类型
                url:"delete?ids="+check_val, //向Controller里的deleteSelect传输ids
                success:function(data){//删除成功后，deleteMany会返回一个"ok";
                    if(data=="ok"){
                        alert("删除成功！");//返回ok后弹出一个对话框。
                        location.href="showProduct";//相当于刷新界面
                    }
                }
            });

        }
        else{
            alert("请选择您要删除的内容!");//不勾选不提交，弹出警告框。
            return false;
        }
    }
    //下拉框传值
    function selectChange(obj) {
        var value=obj.value;;//获取下拉框选项的值
        if (value == 0){
            for(var i = 1; i < 3; i++){
                $(".tr_"+i).show();
            }
        }
        if (value == 1){
            for(var i = 1; i < 2; i++){
                $(".tr_"+i).hide();
            }
        }
        if (value == 2){
            for(var i = 2; i < 3; i++){
                $(".tr_"+i).hide();
            }
        }
    }
</script>


</head>


<body>
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">商品列表</a></li>
    </ul>
    </div>
    
    <div class="rightinfo">
    
    <div class="tools">
    
    	<ul class="toolbar">
            <li class="click"><span><img src="images/t01.png" /></span><a href="addProduct.jsp">添加</a></li>
            <li><button id="btn2" onclick="return todelect()">删除</button></li>
        </ul>
        <select id="select1" onchange="selectChange(this)"  name="collectionState"style="margin-left:100px; margin-top:10px;">
            <option value="0">全部分类</option>
            <option value="1">实物商品</option>
            <option value="2">虚拟商品</option>
        </select>

    </div>

    <table class="tablelist">
    	<thead>
    	<tr>
        <th><input id="selectall" type="checkbox" name="selectall"/></th>
        <th>商品类型</th>
        <th>商品名称</th>
        <th>需要金币数</th>
        <th>需要元宝数</th>
        <th>库存</th>
        <th>已售数量</th>
        <th>图片</th>
        <th>商品描述</th>
        <th>是否需要地址</th>
        <th>状态</th>
        <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <c:forEach items="${pageInfo.list}" var="temp">
        <tr class="tr_${temp.typeId}" style="display:">
        <td><input name="id" type="checkbox" value="${temp.id}" /></td>
            <td>${temp.typeName}</td>
            <td>${temp.name}</td>
            <td>${temp.costGolds}</td>
            <td>${temp.costIngots}</td>
            <td>${temp.amount}</td>
            <td>${temp.saleNum}</td>
            <td><img src="${temp.photo}"> </td>
            <td>${temp.description}</td>
            <c:choose>
                <c:when test="${temp.isNeedAdress == 1}">
                    <td> 需要</td>
                </c:when>
                <c:otherwise>
                    <td>不需要</td>
                </c:otherwise>
            </c:choose>

            <c:choose>
                <c:when test="${temp.status == 1}">
                    <td> 已上架</td>
                </c:when>
                <c:otherwise>
                    <td>已下架</td>
                </c:otherwise>
            </c:choose>
            <td><a href="javascript:showEdit(${temp.id})">修改</a>&nbsp;&nbsp;
                <a href="updateStatus?id=${temp.id}&status=${temp.status}">切换状态</a>
            </td>
        </tr>
        </c:forEach>
        </tbody>
    </table>

        当前 ${pageInfo.pageNum }页,总${pageInfo.pages}页,总 ${pageInfo.total } 条记录</div>
    <a style="margin-left: 50px;" href="showProduct?pn=${pageInfo.firstPage}">第一页</a>

    <c:if test="${pageInfo.hasPreviousPage }">
        <a href="showProduct?pn=${pageInfo.pageNum-1}">上一页</a>
    </c:if>

    <c:if test="${pageInfo.hasNextPage }">
        <a href="showProduct?pn=${pageInfo.pageNum+1}">下一页</a>
    </c:if>

    <a href="showProduct?pn=${pageInfo.lastPage}">最后页</a>
    <a style="margin-left: 500px" href="ExportExcel">导出成Excel</a>


    </div>
    <div id="form" style="padding:20px 20px;display: none;">
        <form id="form1" action="updateProduct" method="post">
            商品类型:<input type="text" name="typeName" value="" readonly="readonly"/>
            <br/>
            商品名称:<input type="text" name="name" value=""/>
            <br/>
            需要金币数:<input type="text" name="costGolds" value=""/>
            <br/>
            需要元宝数:<input type="text" name="costIngots" value=""/>
            <br/>
            库存数:<input type="text" name="amount" value=""/>
            <br/>
            已售数量:<input type="text" name="saleNum" value=""/>
            <br/>
            图片:<input type="text" name="photo" value=""/>
            <br/>
            商品描述:<input type="text" name="description" value=""/>
            <br/>
            是否需要地址:<input type="text" name="isNeedAdress" value="" readonly="readonly"/>
            <br/>
            状态:<input type="text" name="status" value="" readonly="readonly"/>
            <br/>
            <input type="hidden" name="id" value=""/>
        </form>
    </div>

</body>

</html>
